<template>
  <div>
    <div>{{ teacher.name }}</div>
    <div>{{ teacher.age }}</div>
    <div>{{ teacher.salary }}</div>
    <button @click="timeFly">过了一年</button>
  </div>
</template>

<script>
export default {
  // 组件的配置项中，除了data是函数，其他一律是对象
  data() {
    return {
      // 需求：只要我卡的钱，变化了，你就发个短信通知一下我~
      money: 100,

      teacher: {
        name: 'harry',
        age: 29,
        salary: 3000,
      },
    }
  },
  methods: {
    //工资函数
    salary(num) {
      this.money += num
    },
    timeFly() {
      this.teacher.age += 1
      this.teacher.salary += 500
      // this.teacher = {}
    },
  },
  //除了data以外所有的配置项都是属性都用：
  watch: {
    'teacher.age' (newvalue){
        if(newvalue===31){
            alert(`你的年龄是${newvalue},你的工资是${this.salary}`)
        }
    }
  },
}
</script>

<style></style>